<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<script type="text/javascript" src="layui1/layui.js" ></script>

	<link rel="stylesheet" href="layui1/css/layui.css" />
<script type="text/javascript" src="js/jQuery-2.2.2-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	var url="ws://localhost:8080/ChatHandler/";
	var ws=null;//webSocket对象
	chatroom();


	$("#jion").click(function(){
		chatroom();
	});
	//加入聊天室
	function chatroom(){
		//获取当前加入聊天室的人的名字
		var uname=$("#uname").val();
		//
		
		//创建websocket对象，连接服务器
		ws=new WebSocket(url+uname);
		//给ws对象绑定事件
		//连接上服务器
		ws.onopen=function(){
			console.info("连接服务器成功！");
		}
		//接收到消息,将消息添加到消息框中
		ws.onmessage=function(result){
			console.info(result.data);
			var textarea=document.getElementById("message");
			textarea.append(result.data+"\n");
			textarea.scrollTop=textarea.scrollHeight;
		}
		//关闭连接
		ws.onclose=function(){
			$("#message").append(uname+"离开聊天室\n");
			console.info("断开连接");
		}
	}
	//发送消息
	$("#send").click(function(){
	//获取输入框
	var content=$("#content").val();
	//发送消息
	if(ws!=null){
		ws.send(content);
		$("#content").val("");//清除输入框的内容
	}
	});
	//离开聊天室
	$("#leave").click(function(){
		if(ws!=null){
			ws.close();
		}
	});
});
</script>


</head>
<body>

<ul class="layui-nav" style="background-color: #202020">
	<li class="layui-nav-item" style="width: 5%"></li>
	<li class="layui-nav-item" style="width: 13%" value="logo"><a href=""><img src="imgs/yoyoga.png" style="height: 50px"></a></li>
	<li class="layui-nav-item" style="width: 12%"></li>
	<li class="layui-nav-item" style="text-align: center;width: 8%"><a href="">主页</a></li>
	<li class="layui-nav-item" style="text-align: center;width: 8%">
		<a href="#">介绍</a>
		<dl class="layui-nav-child">
			<dd><a href="">瑜伽好处</a></dd>
			<dd><a href="">瑜伽流派</a></dd>
		</dl>
	</li>
	<li class="layui-nav-item" style="text-align: center;width: 8%"><a href="">场馆</a></li>
	<li class="layui-nav-item" style="text-align: center;width: 8%">
		<a href="#">教练</a>
		<dl class="layui-nav-child">
			<dd><a href="">移动模块</a></dd>
			<dd><a href="">后台模版</a></dd>
			<dd class="layui-this"><a href="">选中项</a></dd>
			<dd><a href="">电商平台</a></dd>
		</dl>
	</li>
	<li class="layui-nav-item" style="text-align: center;width: 8%"><a href="">社区</a></li>



	<!--<li class="layui-nav-item" style="float: right">
        <a href="#"><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a>
        <dl class="layui-nav-child">
            <dd><a href="#">个人主页</a></dd>
            <dd><a href="#">修改信息</a></dd>
            <dd><a href="#">我的钱包</a></dd>
            <dd><a href="#">我的好友</a></dd>
            <dd><a href="#">退出</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"  style="float: right">
        <a href="">我的订单</a>
    </li>
    <li class="layui-nav-item" style="float: right">
        <a href="">消息<span class="layui-badge-dot"></span></a>
    </li>-->

	<li class="layui-nav-item"  style="float: right">
		<a href="">注册</a>
	</li>
	<li class="layui-nav-item"  style="float: right"><span style="color: #cccccc">|</span></li>
	<li class="layui-nav-item" style="float: right">
		<a href="">登陆</a>
	</li>
</ul>






<div style="width: 600px;height: 500px; background-color:rgb(242,242,242) ;margin: 30px auto;box-shadow: 3px 3px 3px rgb(203,203,203),3px -3px 3px rgb(203,203,203),-3px 3px 3px rgb(203,203,203),3px -3px 3px rgb(203,203,203);">

<!--名称的div-->
<div style="width: 600px;height: 90px; margin: 0 auto;text-align: center;">
	<p style=" font-family: 微软雅黑;font-size: 23px;padding-top: 30px">yoyoga好友聊天室</p>
</div>
	<!--中间的文本-->
<div  style="width: 400px;height: 290px;float: left;"  >
	<div >
		<div>
			<textarea id="message"  rows="19" cols="56" disabled="disabled" style="background-color: rgb(242,242,242);border:1px solid rgb(223,223,223)"></textarea>
		</div>
	</div>
</div>
	<!--输入框-->
	<div style="float: left; width: 400px; height: 60px;">
			<div >
				<div >
					<textarea id="content" rows="4" cols="56" style="background-color: rgb(242,242,242);border:1px solid rgb(223,223,223)"></textarea>
				</div>
			</div>
	</div>
	<input type="hidden" id="uname" value="张三">
	<!--发送按钮-->
	<div style="float: left; width: 393.5px; height: 57px;background-color: rgb(242,242,242);border: 1px solid rgb(223,223,223);border-top: 0px;border-bottom: 0px">
		<button id="jion" style="margin-top: 25px ;background-color: rgb(246,246,246);border: 1px solid rgb(195,197,198);width: 55px;height: 25px"  ><span style="font-size: 11px;">连接</span></button>
		<button id="leave" style="background-color: rgb(246,246,246);border: 1px solid rgb(195,197,198);width: 55px;height: 25px" ><span style="font-size: 11px;">断开</span></button>
		<button id="send" style="background-color: rgb(204,204,204);border: 0px;width: 55px;height: 25px;" ><span style="font-size: 11px;">发送消息</span></button>
	</div>
	<!--右边显示好友列表-->
	<div id="test13"  style="float: left; width: 201px; height: 404px;margin-top: -350px;border-top: 1px solid rgb(223,223,223);">

	<div style="float: left;padding-left: 40%;width: 124px;border: 1px solid rgb(223,223,223);border-top: 0px;border-left: 0px" >私教</div>
		<!--展示好友-->
		<!--私教-->
		<div style="float: left;margin-left: 20px; width: 160px;height: 170px;margin-top: 10px; overflow:auto;">
			<table style="border-spacing: 10px 30px" id="trainerstable">
			<!--	<tr >
				<td><img src="headimgs/11388287d0e56ad7-53b51a5be5b5a2db-0d4a965d46d4436ed1c7053eccb6fe70.jpg" width="25px" height="25px" style="opacity: 0.3;border-radius: 10px">&nbsp;&nbsp;张三</td>
					<td style="font-size: 10px ;padding-left: 30px"><button class="layui-btn  layui-btn-primary layui-btn-xs layui-btn-disabled">私聊</button></td>
			</tr>

				<tr >
					<td><img src="headimgs/11388287d0e56ad7-53b51a5be5b5a2db-0d4a965d46d4436ed1c7053eccb6fe70.jpg" width="25px" height="25px" style="opacity: 0.3;border-radius: 10px">&nbsp;&nbsp;张三</td>
					<td style="font-size: 10px ;padding-left: 30px"><button class="layui-btn  layui-btn-primary layui-btn-xs layui-btn-disabled">私聊</button></td>
				</tr>
				<tr >
					<td><img src="headimgs/11388287d0e56ad7-53b51a5be5b5a2db-0d4a965d46d4436ed1c7053eccb6fe70.jpg" width="25px" height="25px" style="opacity: 0.3;border-radius: 10px">&nbsp;&nbsp;张三</td>
					<td style="font-size: 10px ;padding-left: 30px"><button class="layui-btn  layui-btn-primary layui-btn-xs layui-btn-disabled">私聊</button></td>
				</tr>
				<tr >
					<td><img src="headimgs/11388287d0e56ad7-53b51a5be5b5a2db-0d4a965d46d4436ed1c7053eccb6fe70.jpg" width="25px" height="25px" style="opacity: 0.3;border-radius: 10px">&nbsp;&nbsp;张三</td>
					<td style="font-size: 10px ;padding-left: 30px"><button class="layui-btn  layui-btn-primary layui-btn-xs layui-btn-disabled">私聊</button></td>
				</tr>-->


			</table>
		</div>
		<div style="float: left;padding-left: 40%;width: 124px;border: 1px solid rgb(223,223,223);border-left: 0px" >学员</div>

		<!--学员-->
		<div style="float: left;margin-left: 20px; width: 160px;height: 170px;margin-top: 10px; overflow:auto;">
			<table style="border-spacing: 10px 30px" id="studentstable">
			<!--	<tr >
					<td><img src="headimgs/11388287d0e56ad7-53b51a5be5b5a2db-0d4a965d46d4436ed1c7053eccb6fe70.jpg" width="25px" height="25px" style="border-radius: 10px">&nbsp;&nbsp;张三</td>
					<td style="font-size: 10px ;padding-left: 30px"><button class="layui-btn  layui-btn-primary layui-btn-xs ">私聊</button></td>
				</tr>

				<tr >
					<td><img src="headimgs/11388287d0e56ad7-53b51a5be5b5a2db-0d4a965d46d4436ed1c7053eccb6fe70.jpg" width="25px" height="25px" style="opacity: 0.3;border-radius: 10px">&nbsp;&nbsp;张三</td>
					<td style="font-size: 10px ;padding-left: 30px"><button class="layui-btn  layui-btn-primary layui-btn-xs layui-btn-disabled">私聊</button></td>
				</tr>
				<tr >
					<td><img src="headimgs/11388287d0e56ad7-53b51a5be5b5a2db-0d4a965d46d4436ed1c7053eccb6fe70.jpg" width="25px" height="25px" style="opacity: 0.3;border-radius: 10px">&nbsp;&nbsp;张三</td>
					<td style="font-size: 10px ;padding-left: 30px"><button class="layui-btn  layui-btn-primary layui-btn-xs layui-btn-disabled">私聊</button></td>
				</tr>
				<tr >
					<td><img src="headimgs/11388287d0e56ad7-53b51a5be5b5a2db-0d4a965d46d4436ed1c7053eccb6fe70.jpg" width="25px" height="25px" style="opacity: 0.3;border-radius: 10px">&nbsp;&nbsp;张三</td>
					<td style="font-size: 10px ;padding-left: 30px"><button class="layui-btn  layui-btn-primary layui-btn-xs layui-btn-disabled">私聊</button></td>
				</tr>-->


			</table>
		</div>
	</div>

</div>








	<!--<div style="float: left ;margin-left:35%">
	<p>yoyoga好友聊天室</p>
	<textarea id="message" rows="10" cols="50" disabled="disabled"></textarea>
	<div>
	<input type="text" id="content">
	<input type="hidden" id="uname" value="张三">
	<button id="jion">加入聊天室</button>
	<button id="leave">离开聊天室</button>
	</div>
	<div>
	<button id="send">发送消息</button>
	</div>
	</div>-->
</body>
<script>
	var userId;
	var userType;

	$(document).ready(function () {

		$.ajax({
			url:"user1/getUserInfo",
			type:"get",
			success:function(data){
				userId = data.userId;
				userType = data.userType;
			}
		});

	});
</script>
<script>
	$.ajax({
		url:"attention/findEachOtherAttentionall",

		data:{"userid1":userId,
		"usertype1":userType
		},

		success:function (res) {
alert(res.eachOtherAttentionDTOList.length);
//alert(res.online.indexOf("张三"));
var studentsresult="";
var trainersresult="";
			for(var i=0;i<res.eachOtherAttentionDTOList.length;i++){
				if(res.eachOtherAttentionDTOList[i].tstudents==null&&res.eachOtherAttentionDTOList[i].ttrainers==null){
				continue;
				}else if(res.eachOtherAttentionDTOList[i].tstudents==null&&res.eachOtherAttentionDTOList[i].ttrainers!=null){
					/*从session中获取登录的用户，排除此用户*/
					if(res.eachOtherAttentionDTOList[i].ttrainers[0].tId==userId&&res.eachOtherAttentionDTOList[i].userType==userType){
						continue;
					}if( res.online.indexOf(res.eachOtherAttentionDTOList[i].ttrainers[0].tName)!=-1){
						trainersresult+="<tr >\n" +
								"\t\t\t\t<td><img src=\"headimgs/11388287d0e56ad7-53b51a5be5b5a2db-0d4a965d46d4436ed1c7053eccb6fe70.jpg\" width=\"25px\" height=\"25px\" style=\"border-radius: 10px\">&nbsp;&nbsp;"+res.eachOtherAttentionDTOList[i].ttrainers[0].tName+"</td>\n" +
								"\t\t\t\t\t<td style=\"font-size: 10px ;padding-left: 30px\"><button class=\"layui-btn  layui-btn-primary layui-btn-xs \" onclick=\"privatechat('"+res.eachOtherAttentionDTOList[i].ttrainers[0].tName+"')\">私聊</button></td>\n" +
								"\t\t\t</tr>";
					}else{
						trainersresult+="<tr >\n" +
								"\t\t\t\t<td><img src=\"headimgs/11388287d0e56ad7-53b51a5be5b5a2db-0d4a965d46d4436ed1c7053eccb6fe70.jpg\" width=\"25px\" height=\"25px\" style=\"opacity: 0.3;border-radius: 10px\">&nbsp;&nbsp;"+res.eachOtherAttentionDTOList[i].ttrainers[0].tName+"</td>\n" +
								"\t\t\t\t\t<td style=\"font-size: 10px ;padding-left: 30px\"><button class=\"layui-btn  layui-btn-primary layui-btn-xs layui-btn-disabled\" onclick=\"privatechat('"+res.eachOtherAttentionDTOList[i].ttrainers[0].tName+"')\">私聊</button></td>\n" +
								"\t\t\t</tr>";
					}

					//alert(res[i].ttrainers.tName);

				}else if(res.eachOtherAttentionDTOList[i].tstudents!=null&&res.eachOtherAttentionDTOList[i].ttrainers==null){
					if(res.eachOtherAttentionDTOList[i].tstudents[0].sId==userId&&res.eachOtherAttentionDTOList[i].userType==userType){
						continue;
					}if(res.online.indexOf(res.eachOtherAttentionDTOList[i].tstudents[0].sName)!=-1){
						studentsresult+="<tr >\n" +
								"\t\t\t\t\t<td><img src=\"headimgs/11388287d0e56ad7-53b51a5be5b5a2db-0d4a965d46d4436ed1c7053eccb6fe70.jpg\" width=\"25px\" height=\"25px\" style=\"border-radius: 10px\">&nbsp;&nbsp;"+res.eachOtherAttentionDTOList[i].tstudents[0].sName+"</td>\n" +
								"\t\t\t\t\t<td style=\"font-size: 10px ;padding-left: 30px\"><button class=\"layui-btn  layui-btn-primary layui-btn-xs \" onclick=\"privatechat('"+res.eachOtherAttentionDTOList[i].tstudents[0].sName+"')\">私聊</button></td>\n" +
								"\t\t\t\t</tr>";
					}else {
						studentsresult+="<tr >\n" +
								"\t\t\t\t\t<td><img src=\"headimgs/11388287d0e56ad7-53b51a5be5b5a2db-0d4a965d46d4436ed1c7053eccb6fe70.jpg\" width=\"25px\" height=\"25px\" style=\"opacity: 0.3;border-radius: 10px\">&nbsp;&nbsp;"+res.eachOtherAttentionDTOList[i].tstudents[0].sName+"</td>\n" +
								"\t\t\t\t\t<td style=\"font-size: 10px ;padding-left: 30px\"><button class=\"layui-btn  layui-btn-primary layui-btn-xs layui-btn-disabled\" onclick=\"privatechat('"+res.eachOtherAttentionDTOList[i].tstudents[0].sName+"')\">私聊</button></td>\n" +
								"\t\t\t\t</tr>";
					}

				}
                $("#trainerstable").html(trainersresult);
				$("#studentstable").html(studentsresult);
				//console.info(res[0].tstudents);
			}

		}
	});

/*
	var a = '<img src="headimgs/11388287d0e56ad7-53b51a5be5b5a2db-0d4a965d46d4436ed1c7053eccb6fe70.jpg" width="20px" height="20px" style="opacity: 0.3;border-radius: 10px">&nbsp;&nbsp;张三 <button id=" writeattention" type="button" class="layui-btn  layui-btn-primary layui-btn-xs" onclick="privatechat2()">私聊</button>';
	layui.use(['tree', 'util'], function(){
		var tree = layui.tree
				,layer = layui.layer
				,util = layui.util
				,data1 = [{
			title: '私教'

			,children: [{
				title: '<img src="headimgs/11388287d0e56ad7-53b51a5be5b5a2db-0d4a965d46d4436ed1c7053eccb6fe70.jpg" width="20px" height="20px" style="border-radius: 10px">&nbsp;&nbsp;张三 <button id=" writeattention" type="button" class="layui-btn  layui-btn-primary layui-btn-xs" onclick="privatechat(\'张三\')" >私聊</button>'



    },{
				title:'<img src="headimgs/11388287d0e56ad7-53b51a5be5b5a2db-0d4a965d46d4436ed1c7053eccb6fe70.jpg" width="20px" height="20px" style="opacity: 0.3;border-radius: 10px">&nbsp;&nbsp;张三 <button id=" writeattention" type="button"  class="layui-btn layui-btn-primary layui-btn-xs layui-btn-disabled " onclick="privatechat1()" >私聊</button>'


    },{
				title: '<img src="headimgs/11388287d0e56ad7-53b51a5be5b5a2db-0d4a965d46d4436ed1c7053eccb6fe70.jpg" width="20px" height="20px" style="border-radius: 10px">&nbsp;&nbsp;张三 <button id=" writeattention" type="button" class="layui-btn  layui-btn-primary layui-btn-xs" onclick="privatechat3()">私聊</button>'


			}
				,{	title:""
		}]
		},{
			title: '学员'

			,children: [{
				title: a

			},{
				title: a


			},{
				title: a

			}]

		}]

		tree.render({
			elem: '#test13'
			,data: data1
			,showLine: false  //是否开启连接线
		});
	});*/
</script>

<script>

    function privatechat(name){
        layui.use('layer', function(){
            layer = layui.layer;
            //页面层
            layer.ready(function(){
				data = {
					name:name

				};
                layer.open({
                    type:2,
                    title:"",
                    // skin: 'layui-layer-rim', //加上边框
                    area: ['700px', '550px'],
                    offset:"60px",
                    maxmin:true,//宽高
                    scrollbar: false ,
                    content:"/privatechat.html"
                    //btn:['确认','取消']
                    ,success:function(index,layero){


                    }
                });

            });

        });
    }

</script>
</html>